<template>
    <div>
        <el-row tyep="flex">
            <el-col :span="18">
                <el-main>
                    <!-- 走马灯 -->
                    <el-carousel :interval="3000">
                        <el-carousel-item v-for="item of carouselItem" :key="item.id">
                            <el-image :src="item.src" fit="fill">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <el-row style="margin: 40px 0px;">
                        <el-col :offset="2" :span="4" id="show-plant">植物展示</el-col>
                    </el-row>
                    <plants :queryInfo="queryInfo"></plants>
                </el-main>
            </el-col>
            <el-col :span="6">
                <el-main>
                    <el-row>
                        <ranking-list :tableData="rankList"></ranking-list>
                    </el-row>
                </el-main>

            </el-col>
        </el-row>

    </div>
</template>
<script>

import { page } from "@/api/plantApi";
import { getPicture } from "@/api/index"
import Plants from "@/components/front/Plants.vue";
import RankingList from "@/components/front/RankingList.vue";
// import { init } from "events";
const options = {
    components: {
        Plants, RankingList
    },
    computed: {
        queryInfo() {
            return this.$store.state.frontQuery;
        }
    },
    data() {
        return {
            //走马灯轮播图对象
            carouselItem: [
                { id: "1", src: require("@/assets/images/carouselImges/1.png") },
                { id: "2", src: require("@/assets/images/carouselImges/2.png") },
                { id: "3", src: require("@/assets/images/carouselImges/3.png") },
                { id: "4", src: require("@/assets/images/carouselImges/4.png") }
            ],
            rankQuery: {
                page: 1,
                pageSize: 10
            },
            rankList: []
        }
    },
    created() {
        this.init();
        // this.getImage(this.carouselItem[0]);
        // this.getCarouselItem();
    },
    methods: {
        init() {
            this.getRankList();
        },
        getImage(item) {
            getPicture(item.pictureUrl).then((resp) => {
                let url = window.URL.createObjectURL(resp.data);
                item.src = url;
                console.log(url);
            })
        },
        getRankList() {
            let that = this;
            page(that.rankQuery).then(resp => {
                that.rankList = resp.data.data.records;
            })
        },
        showCarouse() {
            this.carouselItem.forEach(item => {
                this.getImage(item);
            });
        }
        // getCarouselItem() {
        //     let that = this;
        //     page(that.carQuery).then((resp) => {
        //         that.carouselItem = resp.data.data.records;
        //         // console.log(resp.data.data.records);
        //         this.showCarouse();
        //     })
        // }
    }
}

export default options;
</script>

<style>
#show-plant {
    color: #8fa66b;
    font-size: large;
}

.demo-image__error .image-slot,
.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
}
</style>